import React, { Component } from 'react';
import { Tree } from 'antd';
const menuList = [
    {
      title: '首页', // 菜单标题名称
      key: '/home', // 对应的path
      icon: 'home', // 图标名称
      isPublic: true, // 公开的
    },
    {
      title: '商品',
      key: '/products',
      icon: 'appstore',
      children: [ // 子菜单列表
        {
          title: '品类管理',
          key: '/category',
          icon: 'bars'
        },
        {
          title: '商品管理',
          key: '/product',
          icon: 'tool'
        },
      ]
    },
  
    {
      title: '用户管理',
      key: '/user',
      icon: 'user'
    },
    {
      title: '角色管理',
      key: '/role',
      icon: 'safety',
    },
  
    {
      title: '图形图表',
      key: '/charts',
      icon: 'area-chart',
      children: [
        {
          title: '柱形图',
          key: '/charts/bar',
          icon: 'bar-chart'
        },
        {
          title: '折线图',
          key: '/charts/line',
          icon: 'line-chart'
        },
        {
          title: '饼图',
          key: '/charts/pie',
          icon: 'pie-chart'
        },
      ]
    },
  
    {
      title: '订单管理',
      key: '/order',
      icon: 'windows',
    },
  ]
class Auth extends Component {
    // 根据传入角色的menus生成初始状态
    constructor(props){
        super(props) 
        let {menus} = this.props.role
        this.state = {
            checkedKeys: menus
        } 
    }
   
    render() {
        
        let {checkedKeys} = this.state
        return (
           
            <div>
                <Tree
       checkable
       defaultExpandAll={true} 
       checkedKeys={checkedKeys}
       onCheck={this.onCheck}
       treeData={menuList}
    />
            </div>
        );
    }
    // 根据新传入的role来更新checkedKeys状态
    // 当组件接收到新的属性时候自动调用
    UNSAFE_componentWillReceiveProps(nextProps){
        this.setState({checkedKeys:nextProps.role.menus})
        // 这样写也可以
        // this.state.checkedKeys = nextProps.role.menus
    }
    
    onCheck = (checkedKeys, info) => {
        // console.log('onCheck', checkedKeys)
        this.setState({checkedKeys})
    }
}

export default Auth;
